<template>
	<view class="dialog">
		<el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :before-close="handleDialogClose">
			<!-- 添加用户 -->
			<el-form ref="form" :model="form" label-width="130px" :rules="rules" v-if="title == '创建用户'">
				<el-form-item label="用户名" class="item" prop="username">
					<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="密码" class="item" prop="pwd">
					<el-input v-model="form.pwd" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" class="item" prop="phone">
					<el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" class="item" prop="email">
					<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
				</el-form-item>
				<el-form-item label="联系人" class="item" prop="contacts">
					<el-input v-model="form.contacts" placeholder="请输入联系人姓名"></el-input>
				</el-form-item>
				<!-- <el-form-item label="银行卡" class="item" prop="bankNumber">
					<el-input v-model="form.bankNumber" placeholder="请输入银行卡号"></el-input>
				</el-form-item>
				<el-form-item label="归属银行" class="item" prop="toBank">
					<el-input v-model="form.toBank" placeholder="请输入银行卡归属银行"></el-input>
				</el-form-item>
				<el-form-item label="住址" class="item" prop="address">
					<el-input v-model="form.address" placeholder="请输入详细住址"></el-input>
				</el-form-item> -->
			</el-form>
			<!-- 新增链接 -->
			<el-form ref="form" :model="form" label-width="130px" :rules="rules" v-if="title == '新增链接'">
				<el-form-item label="名称" class="item" prop="linkName">
					<el-input v-model="form.linkName" placeholder="请输入链接名称"></el-input>
				</el-form-item>
				<el-form-item label="链接" class="item" prop="link">
					<el-input v-model="form.link" placeholder="请输入链接" maxlength="255"></el-input>
				</el-form-item>
				<el-form-item label="渠道" class="item" prop="channel">
					<el-input v-model="form.channel" placeholder="请输入渠道来源"></el-input>
				</el-form-item>
				<el-form-item label="链接状态" class="item">
				    <el-radio-group v-model="form.linkState" prop="linkState">
				      <el-radio :label="0">启用</el-radio>
				      <el-radio :label="1">禁用</el-radio>
				    </el-radio-group>
				  </el-form-item>
			</el-form> 
			<!-- 编辑链接 -->
			<el-form ref="form" :model="form" label-width="130px" :rules="rules" v-if="title == '编辑'">
				<el-form-item label="新链接" class="item" prop="newLink">
					<el-input v-model="form.newLink" placeholder="请输入新链接" maxlength="255"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleClose(true)" v-preventReClick>{{ getBtnTitle(title) }}</el-button>
				<el-button @click="handleClose(false)">取 消</el-button>
			</span>
		</el-dialog>
	</view>
</template>
<script>
	import {
		Request
	} from '../../model/request.js'
	import {
		Util
	} from '../../utils/util.js'
	// import {
	// 	config
	// } from "../../api/config.js";
	// import {
	// 	ServerUrl
	// } from "../../api/server_url.js";
	export default {
		props: {
			dialogVisible: '',
			second: '',
			title: '',
			item: {}
		},
		
		data() {
			return {
				form: {
					// 新增用户
					username: '',
					pwd: '',
					phone: '',
					email: '',
					contacts: '',
					bankNumber: '',
					toBank: '',
					address: '',
					
					// 新增广告
					linkName: '',
					link: '',
					channel: '',
					linkState: 1,
					
					// 编辑
					newLink: ''
				},
				taxTypeArr: [ {
					value: 1,
					label: '一般纳税人'
				},
				{
					value: 2,
					label: '小团队类型'
				},],
				rateArr: [{
					value: '3%',
					label: '3%'
				}, {
					value: '6%',
					label: '6%'
				}],
				imageUrl: '',
				action: '',
				mediaNameAll: [],
				rules: {
					username: [{
						required: true,
						message: '请输入联系人名称',
						trigger: 'blur'
					}, ],
					pwd: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							pattern: /^[0-9A-Za-z]{6,20}$/,
							message: '请输入6-20位英文或数字的正确密码'
						},
					],
					phone: [{
							required: true,
							message: '请输入联系电话',
							trigger: 'blur'
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '请输入正确联系电话'
						}
					],
					email: [{
							required: true,
							message: '请输入邮箱',
							trigger: 'blur'
						},
						{
							pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
							message: '请输入正确邮箱'
						}
					],
					contacts: [{
						required: true,
						message: '请输入联系人',
						trigger: 'blur'
					}, ],
					bankNumber: [{
						required: true,
						message: '请输入银行账户',
						trigger: 'blur'
					}, {
						pattern: /^([1-9]{1})(\d{14}|\d{18})$/,
						message: '请输入正确银行卡号'
					}],
					toBank: [{
						required: true,
						message: '请输入归属银行',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur'
					}],
					
					// 广告效验
					linkName: [{
						required: true,
						message: '请输入链接名称',
						trigger: 'blur'
					}],
					link: [{
							required: true,
							message: '请输入链接',
							trigger: 'blur'
						},
						{
							pattern: /http[s]{0,1}:\/\/([\w.]+\/?)\S*/,
							message: '请输入正确的链接地址'
						},
					],
					channel: [{
						required: true,
						message: '请输入渠道来源',
						trigger: 'blur'
					}],
					linkState: [
						{ required: true, message: '请选择链接状态', trigger: 'change' }
					],
					
					newLink: [{
							required: true,
							message: '请输入新链接',
							trigger: 'blur'
						},
						{
							pattern: /http[s]{0,1}:\/\/([\w.]+\/?)\S*/,
							message: '请输入正确的链接地址'
						}
					]
				}
			}
		},
		
		methods: {
			getBtnTitle(t) {
				if (t == '创建用户') {
					return '创建'
				} else if (t == '新增链接') {
					return '提交'
				} else {
					return '更改'
				}
			},
			
			handleDialogClose() {
				this.form = {
					username: '',
					pwd: '',
					phone: '',
					email: '',
					contacts: '',
					bankNumber: '',
					toBank: '',
					address: '',
					linkName: '',
					link: '',
					channel: '',
					linkState: 1,
					newLink: ''
				}
				this.$refs.form.clearValidate()
				this.$emit('closeDialog', false)
			},
			
			async handleClose(e) {
				if (e == true) {
					this.$refs.form.validate(async (valid) => {
						// console.log(valid, 'valid')
						if (valid) {
							let v
							if (this.second == 1) { // 新增链接
								console.log('活动配置')
								v = await Request.LINKADDH5(this.form.linkName, this.form.link, this.form.channel, this.form.linkState)
								if (v.code == 200) {
									Util.showToast('添加成功')
								}
							}
							if (this.second == 2) {
								console.log('广告链接')
								if (this.title == '新增链接') {
									v = await Request.THIRDADDPARTY(this.form.linkName, this.form.link, this.form.channel, this.form.linkState)
									if (v.code == 200) {
										Util.showToast('添加成功')
									}
								} else {
									v = await Request.THIRDUPDATE(this.item.id, this.form.newLink)
									if (v.code == 200) {
										Util.showToast('修改成功')
									}
								}
							}
							if (!this.second) {
								v = await Request.USERSYSADD(this.form.username, this.form.pwd, this.form.phone, this.form.email, this.form.contacts)
								if (v.code == 200) {
									Util.showToast('创建成功')
									console.log(123)
								}
							}
							this.handleDialogClose()
							this.$emit('closeDialog', true)
						} else {
							console.log('error submit!!')
							return false
						}
					})
				} else {
					this.handleDialogClose()
				}
			}
		}
	}
</script>
<style scoped>
	.dialog {
		/* width: 100%;
	height: 100%; */
		position: absolute;
		left: 0;
		top: 0;
	}

	.el-form-item {
		position: relative;
	}

	.el-form-item::before {
		content: '*';
		position: absolute;
		left: 100px;
		top: 13px;
		color: red;
	}

	/deep/ .item .el-form-item__label {
		position: relative;
		left: -20px;
		/* color: red;
		border: solid 1px red;
		margin-left: 30px; */
	}

	/deep/ .item .el-form-item__label::before {
		content: ' ' !important;
	}

	.photo {
		width: 299px;
		height: 200px;
	}
</style>
